<template>
  <div>
    <div class="div-content" style="">
      <div class="div-item" style="heigt: 100%">
        <div class="div-item-left">支出：</div>
        <div class="div-item-right">{{all.out|0}}</div>
      </div>
      <div class="div-item" style="heigt: 100%">
        <div class="div-item-left">收入：</div>
        <div class="div-item-right">{{all.in|0}}</div>
      </div>
    </div>
    <Form ref="searchForm" @keydown.enter.native="Search" :model="searchForm" inline :label-width="60"
      class="search-form">
      <Form-item label=" " prod="type">
        <Select v-model="searchForm.type" placeholder="全部级别" clearable style="width: 160px">
          <Option value="out">支出</Option>
          <Option value="in">收入</Option>
        </Select>
      </Form-item>
      <Form-item label="时间" prop="createDate">
        <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
          @on-change="selectDateChange" placeholder="选择起始时间" style="width: 200px">
        </DatePicker>
      </Form-item>
      <Form-item label="会员手机号" prop="mobile" :label-width="100">
        <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员手机号" clearable style="width: 160px" />
      </Form-item>
      <Form-item label="区域" prop="region">
        <region ref="region" style="width: 350px" @selected="selectedRegionSearch" />
      </Form-item>
      <Form-item label="级别" prop="gradeName">
        <Select v-model="searchForm.gradeName" placeholder="全部级别" clearable style="width: 160px">
          <Option value="金卡会员">金卡会员</Option>
          <Option value="银卡会员">银卡会员</Option>
          <Option value="普通用户">普通用户</Option>
        </Select>
      </Form-item>
      <Button @click="Search" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      <Button @click="handleReset" type="primary" class="search-btn">重置</Button </Form>
    </Form>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
        @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
        show-sizer></Page>
    </Row>
  </div>
</template>

<script>
  import {
    PlantWalletSale,
    PlantWalletSaleALL
  } from "@/api/financial.js"
  import {
    withdrawApply
  } from "@/api/member";
  import region from "@/views/lili-components/region-every";
  export default {
    data() {
      return {
        all: {},
        loading: false,
        total: 0,
        selectDate: '',

        searchForm: {
          type: 'out',
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          selectDate: '',
          phone: '',
          gradeName: ''
        },
        columns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "订单时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          }, {
            title: "订单号",
            key: "sn",
            minWidth: 240,
            tooltip: true,
          }, {
            title: "会员昵称",
            key: "nickName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "手机号码",
            key: "mobile",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "级别",
            key: "gradeName",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "区域",
            key: "region",
            minWidth: 200,
            tooltip: true,
          },

          {
            title: "订单额",
            key: "dingdan",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "运费",
            key: "yunfei",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "服务费",
            key: "fuwufei",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "订单焕贝总额",
            key: "allMoney",
            minWidth: 200,
            tooltip: true,
          }
        ],
        data: [],
        showList: {}, // 可操作选项
        roleModalVisible: false, // 审核模态框
        audit: "", // 审核备注
      }
    },
    components: {
      region
    },
    created() {
      this.getDataList()
      PlantWalletSaleALL().then((res) => {
        if (res.result) {
          this.all = res.result
        } else {
          this.all = {}
        }
      })
    },
    methods: {
      getDataList() {
        PlantWalletSale(this.searchForm).then((res) => {
          this.loading = false;
          this.data = res.result.records;
          this.total = res.result.total;
        })
      },
      // 起止时间从新赋值
      selectDateChange(v) {
        if (v) {
          this.searchForm.startDate = v[0];
          this.searchForm.endDate = v[1];
        }
      },
      // 跳转到扣率信息详情
      koulvDetail(row) {
        this.$router.push({
          name: "koulv-detail",
          query: {
            id: row.sn
          }
        })
      },
      // 审核
      submitRole(res) {
        const params = {};
        params.applyId = this.showList.id;
        params.result = res;
        params.remark = this.audit;
        if (res === false && params.remark === "") {
          this.$Message.error("审核备注不能为空");
          return;
        }
        withdrawApply(params).then((res) => {
          this.loading = false;
          if (res == true) {
            this.$Message.success("操作成功", 3);
            this.roleModalVisible = false;
            this.getDataList();
          }
        });
      },
      dakuan(params) {
        let that = this
        this.$Modal.confirm({
          title: '确定已打款吗？',
          onOk() {
            PlantWithdrawalDakuan(params.row.id).then((res) => {
              if (res.success) {
                this.$Message.success("确认打款成功", 3);
              } else {
                this.$Message.error("确认打款失败", 3);
              }
              that.getDataList()
            })
          }
        })
      },
      // 选中的地址
      selectedRegionSearch(val) {
        this.searchForm.region = val[1].join(',');
        this.searchForm.regionId = val[0].join(',');
      },
      Search() {
        this.loading = true
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      handleReset() {
        this.searchForm.pageNumber = 1 // 当前页数
        this.searchForm.pageSize = 10 // 页面大小
        this.searchForm.createDate = ''
        this.searchForm.mobile = ''
        this.$refs.region.addr = [];
        this.searchForm.gradeName = ''
        this.selectDate = ''
        this.searchForm.region = '';
        this.searchForm.regionId = '';
        this.getDataList();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = v;
        this.getDataList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .div-content {
    width: 100%;
    height: 100%;
    display: flex;

    .div-item {
      line-height: 35px;
      display: flex;
      float: left;
      margin-right: 36px;
      font-size: 16px;
      font-weight: 600;

      >.div-item-left {}

      >.div-item-right {
        flex: 1;
        word-break: break-all;
      }
    }
  }
</style>
